<template>
  <div class="check-question">
    <question-card :question="question" />
    <div class="action">
      <mu-circular-progress v-if="loading" class="action-loading" :size="36" />
      <mu-text-field v-model="rejectReson" full-width placeholder="请在这里拒绝理由" multi-line :rows="1" :rows-max="3" :error-text="rejectResonError"></mu-text-field>
      <div class="action-buttons">
        <mu-button class="action-button" color="success" @click="pass()">通过</mu-button>
        <mu-button class="action-button" color="error" @click="fail()">拒绝</mu-button>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api'
import QuestionCard from '@/components/QuestionCard'

const STATUS_PASS = 1
const STATUS_FAIL = 2

export default {
  name: 'CheckQuestion',
  components: {
    QuestionCard
  },
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      loading: 0,
      question: {
        id: 0,
        type_id: 0,
        author_id: 0,
        style: 0,
        image: null,
        text: '',
        options: [],
        answer: '',
        status: 0,
        pass_count: 0,
        fail_count: 0,
        is_exported: 0,
        create_at: 0,
        update_at: 0,
        author: {
          id: 0,
          username: '',
          realname: '',
          role: 0,
          is_superadmin: false,
          is_active: true,
          register_at: 0,
          last_login_at: 0
        },
        image_url: null
      },
      rejectReson: '',
      rejectResonError: ''
    }
  },
  watch: {
    id(val) {
      // 当倒退时，重新获取题目
      if (this.question.id !== val) {
        this.getQuestionById(this.id)
      }
    }
  },
  created() {
    // 第一次创建时需要重新获取题目
    if (this.question.id === 0) {
      this.getQuestionById(this.id)
    }
  },
  methods: {
    // 根据特定ID获取题目
    async getQuestionById(id) {
      this.loading++
      try {
        this.question = await api.getQuestion(id)
      } catch (err) {
        this.$apiCatch(err)
      }
      this.loading--
    },
    // 获取下一个题目
    async goNext() {
      this.loading++
      try {
        const data = await api.getRandomUncheckedQuestion()
        if (data) {
          const id = data.id
          this.question = data
          this.$router.push({
            name: 'check-question',
            params: {
              id
            }
          })
        } else {
          this.$toast.success('所有题目都审完啦，快犒劳一下自己！')
          this.$router.push({ name: 'check-all' })
        }
        this.rejectResonError = ''
      } catch (err) {
        this.$apiCatch(err)
      }
      this.loading--
    },
    // 通过
    async pass() {
      this.loading++
      try {
        await api.checkQuestion(this.id, STATUS_PASS, null)
        await this.goNext()
      } catch (err) {
        this.$apiCatch(err)
      }
      this.loading--
    },
    // 拒绝
    async fail() {
      if (this.rejectReson === '') {
        this.rejectResonError = '必须填写拒绝理由哦！'
        return
      }
      this.loading++
      try {
        await api.checkQuestion(this.id, STATUS_FAIL, this.rejectReson)
        await this.goNext()
      } catch (err) {
        this.$apiCatch(err)
      }
      this.loading--
    }
  }
}
</script>

<style scoped>
.check-question {
  padding: 12px;
}

.action {
  margin: 0 auto;
  width: 500px;
}
.action-loading {
  display: block;
  margin: 0 auto;
}
.action-buttons {
  display: flex;
}
.action-button {
  margin: 3px;
  flex: 1 1 auto;
}

.is-phone .action {
  width: 100%;
}
</style>
